<!DOCTYPE html>
<html lang="en">
<head>
    <th:block th:include="libs :: header('字典管理')"></th:block>
</head>
<body>
  <div id="DictComponent">
    <ivz-edit-view ref="vbt" :metas="metas" :config="config" :search-metas="searchMetas"></ivz-edit-view>
    <ivz-drawer-edit-table :metas="dictData.metas" :action-metas="dictData.actionMetas"
        :config="dictData.config" ref="det" :height="300"></ivz-drawer-edit-table>
  </div>
  <th:block th:include="libs :: footer"></th:block>
</body>
<script>
  let vue = new Vue({
      el: "#DictComponent",
      data: {
          editRow: null,
          metas: [
              {field: 'name', title: '字典名称', width: 180, required: true, editable: true},
              {field: 'type', title: '字典类型', required: true, editable: true},
              {field: 'status', title: '状态', type: 'select', data: [
                      {label: '启用', value: '正常'}, {label: '禁用', value: '禁用'}
                  ], default: '正常', editable: true, width: 180},
              {field: 'remark', title: '备注', width: 280, editable: true},
              {field: 'createTime', title: '创建时间', width: 160, type: 'date', isForm: false},
              {field: 'action', title: '操作', type: 'action'},
          ],
          searchMetas: [
              {field: 'status', title: '状态', type: 'select', data: [
                      {label: '启用', value: '正常'}, {label: '禁用', value: '禁用'}
                  ]},
          ],
          dictData: {
              metas: [
                  {field: 'type', title: '字典类型', width: 120},
                  {field: 'label', title: '标签', type: 'text', width: 120, editable: true},
                  {field: 'value', title: '字典值', type: 'text', width: 100, editable: true},
                  {field: 'remark', title: '备注', type: 'text', width: 160, editable: true},
                  {field: 'action', title: '操作', type: 'action', width: 160}
              ],
              actionMetas: {},
              config: {
                  table: {
                      scroll: {y: 180}
                  }
              },
          },
          config: {
              form: {},
              table: {
                pagination: {}
              }
          }
      },
      created: function() {
          // 获取操作字典数据需要的动作元数据
          this.dictData.actionMetas = this.$page.getActionMetasByUrl('/core/dictData');

          // 通过重写字典数据的方式, 获取当前要查看字典数据的行
          this.$page.setActionMeta("DictData", {
              color: 'green', callBack: function(row) {
                  return new Promise(function(resolve, reject) {
                      if(row['id']) {
                          vue.editRow = row;
                          vue.$refs['det'].open()
                      }
                  })
              }
          });

          // 新增字典数据时, 添加指定的字典类型
          let addMeta = this.dictData.actionMetas['Add'] || {};
          addMeta.callBack = function(row) {
              return new Promise(function(resolve, reject) {
                  row['type'] = vue.editRow['type'];
                  return resolve();
              })
          };

          // 查询字典数据时, 根据字典类型查询字典数据
          let viewMeta = this.dictData.actionMetas['View'] || {};
          viewMeta.callBack = function(row) {
              return new Promise(function(resolve, reject) {
                  row['type'] = vue.editRow['type'];
                  return resolve()
              })
          }
      },
  });
</script>
</html>
